<script lang="ts" setup>
import { IPagination } from '@/api/app';
import { NDataTable } from 'naive-ui';
import { onMounted, Ref, ref } from 'vue';

interface Props {
  // eslint-disable-next-line no-unused-vars
  search: (pagination: Ref<IPagination>) => void
}

const props = defineProps<Props>();

const pagination = ref<IPagination>({
  pageNum: 1,
  pageSize: 10,
  total: 0
});

function _search(pageNum: number) {
  pagination.value.pageNum = pageNum;
  props.search(pagination);
}

function onUpdatePage() {
  props.search(pagination);
}

onMounted(() => {
  props.search(pagination);
});

defineExpose({
  search: _search
});

</script>
<template>
  <div>
    <NDataTable
      v-bind="$attrs"
    />
    <div class="flex justify-end mt-normal">
      <NPagination
        v-model:page="pagination.pageNum"
        :page-size="pagination.pageSize"
        :item-count="pagination.total"
        :on-update-page="onUpdatePage"
      />
    </div>
  </div>
</template>
